<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        right-text=""
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <van-search
      v-model="XXyz.name"
      placeholder="请输入搜索关键词"
      @search="searchXX"
      @clear="onRefresh"
    />
    <van-pull-refresh
      class="pull-refresh_Search"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="list.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表内容 -->
        <div class="ulbox" v-if="list.length > 0">
          <div class="ul" v-for="(item, index) in list" :key="index">
            <div class="li">
              <div class="GX">
                <van-checkbox
                  v-model="item.checked"
                  @click.stop="GXXX"
                ></van-checkbox>
              </div>
              <div class="li_box">
                <div class="title">
                  <van-image
                    class="img"
                    radius="4"
                    width="70"
                    height="70"
                    :src="item.image"
                    mode=""
                  >
                  </van-image>
                  <div class="title_text">
                    <div class="WZ_size_16" style="font-weight: 700">
                      {{ item.name }}
                    </div>
                    <div
                      class="WZ_size_18"
                      style="color: rgb(255, 141, 26); font-weight: 700"
                    >
                      ¥{{ item.price }}
                    </div>
                  </div>
                </div>
                <div class="textXX" style="padding: 10px 0">
                  <div class="text WZ_size_16">设置数量：</div>
                  <div class="">
                    <div class="WZ_size_14 textXX">
                      <div style="padding-right: 10px">不限</div>

                      <van-checkbox
                        v-model="item.checked2"
                        @click.stop="GXXX2"
                      ></van-checkbox>
                    </div>
                  </div>
                </div>
                <div class="textXX" v-if="!item.checked2">
                  <div class="text WZ_size_16">设置数量：</div>
                  <div>
                    <van-stepper min="1" v-model="item.allNum" step="1" />
                  </div>
                </div>
                <div class="textXX" style="padding: 10px 0">
                  <div class="text WZ_size_16">是否推荐：</div>
                  <div class="">
                    <div class="WZ_size_14 textXX">
                      <van-switch v-model="item.checked3" @input="GXXX3" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
    <div class="DI">
      <div style=""></div>
      <van-button
        style="width: 46%; margin-bottom: 20px; margin-left: 20px"
        class="buy"
        color="#36C2A8"
        @click="jumpToBuy()"
        >确认勾选菜品</van-button
      >
    </div>
  </div>
</template>

<script>
import {
  queryMealToDishBackList,
  updateMealBack,
} from "@/api/realAssets/icsharedstation/CPXX/index.js";
export default {
  data() {
    return {
      title: "接龙列表",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      XXyz: {
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        type: "1",
        categoryId: "",
        pageNumber: 1,
        pageSize: 10,
        deleteFlag: "N",
        name: "",
      },
      list2: [],
      list: [],
      mealtodishlist: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false, // 控制错误状态
    };
  },
  created() {},
  mounted() {
    this.onLoad();
  },
  methods: {
    GXXX() {},
    // 点击重试
    retryLoad() {
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    // 下拉刷新
    onRefresh() {
      //   list.value = [];
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      queryMealToDishBackList(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          // 使用 for 循环添加字段
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].checked = false;
            res.data[i].checked2 = false;
            res.data[i].checked3 = false;
            res.data[i].mealtodishId = res.data[i].id; //基础库id
            res.data[i].allNum = 1; //总数量
            res.data[i].surplusNum = 1; //剩余
            res.data[i].TJtype = ""; //1是推荐菜
          }
          //搜索后信息回显
          if (this.list2.length > 0) {
            res.data.forEach((item2) => {
              this.list2.forEach((item) => {
                if (item2.id == item.id) {
                  // 直接复制属性，而不是改变引用
                  Object.assign(item2, item);
                }
              });
            });
          }
          //数据回显
          let XXlist = JSON.parse(decodeURIComponent(this.$route.query.XX));
          console.log("数据回显", XXlist);
          XXlist.forEach((item) => {
            res.data.forEach((item2) => {
              if (item2.id == item.id) {
                item2.checked = true;
                item2.allNum = item.allNum;
                if (item.allNum == 0) {
                  item2.checked2 = true;
                }
                if (item.categoryId == 0) {
                  item2.checked3 = false;
                  item.TJtype = "0";
                } else {
                  item2.checked3 = true;
                  item.TJtype = "1";
                }
                //    == 0 ?  : ,//type是推荐1，不推荐给空
              }
            });
          });
          this.list = [...this.list, ...res.data];
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
    //推荐菜
    GXXX3() {
      this.list.forEach((item) => {
        if (item.checked3) {
          item.TJtype = "1";
          item.checked = true;
        } else {
          item.TJtype = "0";
        }
        // console.log(item.checked3, item.name, item.checked);
      });
    },
    searchXX() {
      this.list2 = [];
      this.list.forEach((item) => {
        if (item.checked) {
          this.list2.push(item);
        }
      });
      this.onRefresh();
    },
    GXXX2() {
      this.list.forEach((item) => {
        if (item.checked2) {
          item.allNum = 0;
        } else {
          item.allNum = 1;
        }
      });
    },
    jumpToBuy() {
      this.mealtodishlist = [];
      this.list.forEach((item) => {
        console.log(item);
        item.surplusNum = item.allNum; //剩余数量和总数量绑定
        if (item.checked) {
          this.mealtodishlist.push(item);
        }
      });
      let li = encodeURIComponent(JSON.stringify(this.mealtodishlist));
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_SetCP",
        query: {
          XX: li, // 序列化对象
        },
      });
      //   console.log(mealtodishlist.value);
    },
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_SetCP",
      });
    },
  },
};
</script>
<style >
.van-stepper__input {
  width: 100px;
}
</style>
<style lang="less" scoped>
@import "../../../../../static/css/index.less";
// @import "@/static/css/GYcSS.scss";
.titletopXX {
  height: 45px;
}
.pull-refresh_Search {
  height: calc(
    var(--real-vh, 1vh) * 100 - 180px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
}
.ul {
  width: 95%;
  margin: 10px auto;
  //   padding: 20px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;
}
.textXX {
  display: flex;
  align-items: center;
  .text {
    width: 80px;
  }
}
.li {
  display: flex;
  align-items: center;
  .li_box {
    padding: 10px;
  }
  .title {
    display: flex;
    align-items: center;
    line-height: 30px;
    .title_text {
      margin-left: 10px;
    }
  }
}
.GX {
  width: 50px;
  position: relative;
  .van-checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.DI {
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
}
</style>